<template>
  <div>
    <div>
      msg: {{ msg }} <br />
      <input type="text" v-model="msg" />
    </div>

    <br />
    <hr />
    <br />

    <div>
      msg2: {{ msg2 }} <br />
      <input type="text" v-model="msg2" />
    </div>

    <br />
    <hr />
    <br />

    <div>
      msg3: {{ msg3 }} <br />
      <input type="text" v-model="msg3" />
    </div>
  </div>
</template>
<script setup lang="ts">
// 使用默认ref定义的值，数据一改变，页面马上就更新。
import useTimeoutRef from '@views/basic/customRef/hooks/useTimeoutRef.ts'

const msg = ref('hello')

// 比如我想5s后再更新，怎么办？使用customRef自定义响应式数据
// 参数是一个回调，返回对象，里面是get和set方法
let timer: number
let initValue = 'hello'
const msg2 = customRef((track, trigger) => {
  return {
    get() {
      track() // 持续关注
      return initValue
    },
    set(val) {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        initValue = val
        trigger() // 通知Vue msg2 改变了。
      }, 5000)
    },
  }
})

const { timeoutRef: msg3 } = useTimeoutRef('world', 1000)
</script>
<style scoped></style>
